<template>
    <div id="body">
        <h1>{{ title }}</h1>
        <Table stripe :columns="titles" :data="data" :loading="loading"></Table>
        <Page :total="100" :page-size="pageSize" show-elevator show-total/>
    </div>
</template>

<script>
    export default {
        name: "List",
        props:{
            title: String,
            titles: Array,
            getList: Function,
            pageSize: {
                type: Number,
                default: 10
            }
        },
        data() {
            return {
                loading: false,
                page: {
                    current:1,
                    total:0
                },
                data: []
            }
        },
        computed:{
        },
        methods: {
            fill(curt, size) {
                this.loading = true;
                const ret = this.getList(curt, size);
                this.data.data = [];
                console.log(ret);
                ret.data.records.forEach(item => this.data.data.push(item));
                this.loading = false;
            }
        },
        mounted() {
            this.fill(this.page.current, this.pageSize);
        }
    }
</script>

<style scoped>
    #body {
        margin: 25px 20px;
    }
</style>
